import type { PropType } from 'vue'
import type { ExtractProps } from '@/utils/type'
import styleVar from '@/styles/variable.module.scss'
import { toStrFirstCase } from '@/utils'
import TabItem from './tab-item'

namespace Tab {
  export const name = toStrFirstCase(`${styleVar.namespace}Tab`)
  export const props = {
    modelValue: [String, Number, Object, Boolean],
    /**
     * 如果 tab-item 的 value 是 object，该属性必填
     */
    valueKey: String,
    /**
     * 滚动方向,
     * @默认 x
     */
    direction: {
      type: String as PropType<'x' | 'y'>,
      default: 'x'
    },
    /**
     * 是否铺满可占几何位置
     * @example
     *  direction = x，tab 的宽度是 100%
     *  direction = y，tab 的高度是 100%
     * @默认 false
     */
    isFillUp: Boolean,
    /**
     * tab 的样式类型
     * @默认 a
     */
    styleType: {
      type: String as PropType<'a'>,
      default: 'a'
    }
  }
  type BaseProps = ExtractProps.Types<typeof props>
  export const emits = {
    change: (_val: BaseProps['modelValue']) => true,
    'update:modelValue': (_val: BaseProps['modelValue']) => true
  }
  export type Props = BaseProps & PartialEmits<typeof emits>
  export const provideName = name + 'Provide'
  export type ProvideContext = {
    isActive(param: TabItem.Props): boolean
    change(param: TabItem.Props): void
    props: BaseProps
  }
  export const Component = <{
    new(): {
      $props: Props
    }
  }>{}
}
export default Tab